<template>
  <section>
   
      <el-card shadow="never" class="searchBox">
      
          <el-form inline size="small" @submit.native.prevent>
            <el-form-item  v-for="(item,i) of options" :key="i">
              <el-select
                v-if="item.type=='select'"
                v-model="searchData.value[item.name]"
                placeholder="请选择"
                @change="changedSelect"
              >
                <el-option
                  v-for="item in item.selection"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-button
                v-else-if="item.type=='btn'"
                size="small"
                class="mr_w_10"
                plain
               @click="btn(item.label)"
              >
              {{labelInfor?labelInfor.allName:item.name}}
                <i :class="item.icon"></i>
              </el-button>
              <el-input
                v-else-if="item.type=='readyInput'"
                v-model="searchData.value[item.name]"
                readonly
                :suffix-icon="item.icon"
                @focus="btn(item.label)"
               
              />
         
              <el-select
                v-else-if="item.type=='filterable'"
                v-model="searchData.value[item.name]"
                filterable
                remote
                clearable
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                @change="changedSelect"
                :loading="loading"
              >
                <el-option
                  v-for="item in item.selection"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-input
                v-else
                v-model="searchData.value[item.name]"
                size="small"
                :placeholder="item.label"
                @input="changedSelect">
              <template slot="prepend"><i class="el-icon-search"></i></template></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="changedSelect">搜 索</el-button>
            </el-form-item>
           
          </el-form>
      
     
      </el-card>


  </section>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class View extends Vue {
  @Prop()
  protected selectOptions: any;
  @Prop()
  protected options: any;
  @Prop()
  protected searchData!: any;

  protected loading: boolean = false;


  protected changedSelect(data: any) {
    this.$emit("changedSelect", data);
  }


}
</script>